<!-- 页面的代码框架结构 -->
<template>
    <div class="demo">Demo组件</div>
    <p>{{mes}}</p>
    <p>{{num+1}}</p>
    <p>{{"不积跬步无以至千里"}}</p>
    <p>{{obj.name}}</p>
    <p>{{ok?'YES':'NO' }}</p>
    <p class="p1">{{ mes1 }}</p>
</template>
<!-- 页面数据方法 -->
<script setup>
import { openBlock } from 'vue';

const mes="定义数据";
const num =10;
const obj={
    name:"张宇"
}
const mes1="红色"
const ok=true;
</script>
<!-- 当前页面样式 -->
 <style>
 .demo{
    font-size: 30px;
    font-weight: bold;
 }
 .p1{
    color: red;
 }
</style>